<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="4" class="hidden-sm-and-down">
				<LeftTree :treeList="treeList" :searchData.sync="searchData" fieldName="class_id" @refesh_list="index"></LeftTree>
			</el-col>
			<el-col :xs="24" :sm="24" :md="20" :lg="20">
				<el-card shadow="never" class="card">
					<div id="charts_one" v-if="dialog.showList" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm = "searchForm" @refesh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;">
							<div>
								<el-row>
								<el-button style="vertical-align:middle" type="success" size="mini" icon="el-icon-plus" v-if="checkPermission('/admin/Cms.Content/add.html')" @click="add(ids)">添加</el-button>
								<el-button style="vertical-align:middle" type="primary" size="mini" icon="el-icon-edit" v-if="checkPermission('/admin/Cms.Content/update.html')" @click="update(ids)">修改</el-button>
								<el-button style="vertical-align:middle" type="danger" size="mini" icon="el-icon-delete" v-if="checkPermission('/admin/Cms.Content/delete.html')" @click="del(ids)">删除</el-button>
								<el-select  size="small" style="margin-left:5px; width:130px;vertical-align:middle" class="select"  v-model="action_type" placeholder="请选择操作">
									<el-option key="100" label="移动" value="100"></el-option>
									<el-option v-for="(item,i) in positions" :key="i" :label="item.key" :value="item.val"></el-option>
								</el-select>
								<div v-if="action_type ==100" style="width:250px;display:inline-block;vertical-align:middle; margin-left:5px;" >
									<Treeselect :default-expand-level="1" v-model="selectTree.class_id" :options="treeList" :normalizer="normalizer" :show-count="true" zIndex="999999" placeholder="请选择所属栏目"/>
								</div>
								<el-button type="primary" size="mini" style="margin-left:5px;" icon="el-icon-check" @click="setPosition">确定</el-button>
								</el-row>
							</div>
							<table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refesh_list="index" :searchTool="true"></table-tool>
						</div>
						<el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="content_id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">
							<el-table-column align="center" type="selection" width="42"></el-table-column>
							<el-table-column align="center" type = '' v-if="fieldList[0].checked" property="content_id" label="编号" show-overflow-tooltip width="70">
							</el-table-column>
							<el-table-column align="left"  v-if="fieldList[1].checked" property="title" label="文章标题" show-overflow-tooltip width="">
								<template slot-scope="scope">
									{{scope.row.title}} <span style="position:relative;top:9px"><el-image v-if="scope.row.pic" :src="'./static/images/pic.gif'"  :preview-src-list="[scope.row.pic]"></el-image></span> <span v-if="scope.row.position" style="color:#ff0000">[{{formatStr(scope.row.position,positions)}}]</span>
								</template>
							</el-table-column>
							<el-table-column align="center" v-if="fieldList[2].checked" property="catagory.class_name" label="所属栏目" show-overflow-tooltip width="120">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[3].checked" property="status" label="状态" show-overflow-tooltip width="70">
								<template slot-scope="scope">
									<el-switch @change="updateExt(scope.row,'status')" :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
								</template>
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[4].checked" property="create_time" label="创建时间" show-overflow-tooltip width="100">
								<template slot-scope="scope">
									{{parseTime(scope.row.create_time,'{y}-{m}-{d}')}}
								</template>
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[5].checked" property="sortid" label="排序号" show-overflow-tooltip width="90">
								<template class="sort" slot-scope="scope">
									<el-input @blur.stop="updateExt(scope.row,'sortid')"  size="mini" placeholder="排序号" v-model="scope.row.sortid"></el-input>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="150">
								<template slot-scope="scope">
									<el-button size="mini" type="primary" @click="update(scope.row)"><i class="el-icon-edit" />修改</el-button>
									<el-button size="mini" type="danger" @click="del(scope.row)"><i class="el-icon-delete" />删除</el-button>
								</template>
							</el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
					<div id="charts_one" v-if="dialog.addDialogStatus" style="width:100%;min-height:80vh">
						<Add size="small" :addDialogStatus="dialog.addDialogStatus" @changePage="changePage" @refesh_list="index"></Add>
					</div>
					<div id="charts_one" v-if="dialog.updateDialogStatus" style="width:100%;min-height:80vh">
						<Update @changePage="changePage" :updateDialogStatus="dialog.updateDialogStatus" :info="updateInfo" :extendData="extendData" :extendList="extendList" size="small" @refesh_list="index"></Update>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import {
		index,
		updateExt,
		getInfo,
		del,
		setPosition
	} from '@/api/admin/cms/content'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import LeftTree from '@/components/common/LeftTree.vue'
	import Add from '@/views/admin/cms/content/add.vue'
	import Update from '@/views/admin/cms/content/update.vue'
	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	import { confirm } from '@/utils/common'
	export default {
		name:'cms_content',
		components: {
			Search,
			Page,
			TableTool,
			LeftTree,
			Add,
			Update,
			Treeselect
		},
		data(){
			return {
				dialog: {
					showList:true,
					addDialogStatus : false,
					updateDialogStatus : false,
				},
				fieldList:[
					{lable:'编号',checked:true},
					{lable:'文章标题',checked:true},
					{lable:'所属栏目',checked:true},
					{lable:'状态',checked:true},
					{lable:'创建时间',checked:true},
					{lable:'排序号',checked:true},
				],
				ids: {},
				single:true,
				multiple:true,
				list: [],
				treeList:[],
				updateInfo:{},
				extendData:{},
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
				searchVisible:true,
				searchForm:[],
				searchData:{},
				extendList:[],
				action_type:'',
				positions:[],
				selectTree:{},
			}
		},
		methods: {
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page}
				if(this.searchData) param = Object.assign(param, this.searchData)
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.page_data.total = res.data.total
					this.loading = false
					if(this.page_data.page == 1){
						this.treeList = res.sql_field_data.class_ids
						this.positions = res.sql_field_data.positions
						this.searchForm = [
							{type:'Input',label:'文章标题',prop:'title',width:'150px'},
							{type:'treeSelect',label:'所属栏目',prop:'class_id',data:res.sql_field_data.class_ids,width:'150px'},
							{type:'Select',label:'状态',prop:'status',data:[{"key":"正常","val":"1"},{"key":"禁用","val":"0"}],width:'150px'},
							{type:'Select',label:'推荐位',prop:'position',data:res.sql_field_data.positions,width:'150px'},
						]
					}
				})
				this.changePage()

			},
			updateExt(row,field){
				updateExt({content_id:row.content_id,[field]:row[field]}).then(res => {
					this.$message({message: '操作成功', type: 'success'})
				})
			},
			add(){
				this.dialog.showList = false
				this.dialog.addDialogStatus = true
				this.dialog.updateDialogStatus = false
			},
			update(row){
				let id = row.content_id ? row.content_id : this.ids.join(',')
				getInfo({content_id:id}).then(res => {
					if(res.status == 200){
						this.dialog.updateDialogStatus = true
						this.dialog.showList = false
						this.dialog.addDialogStatus = false
						this.updateInfo = res.data
						this.extendData = res.extendData ? res.extendData : {}
						this.extendList = res.extendList
					}
				})
			},
			del(row){
				confirm({content:'确定要操作吗'}).then(() => {
					let ids = row.content_id ? row.content_id : this.ids.join(',')
					del({content_id:ids}).then(res => {
						this.$message({message: res.msg, type: 'success'})
						this.index()
					})
				}).catch(() => {})
			},
			selection(selection) {
				this.ids = selection.map(item => item.content_id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex){
				this.$refs.multipleTable.toggleRowSelection(row)
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
			setPosition(){
				if(this.action_type == ''){
					this.$message.error('请选择操作')
					return false
				}
				if(JSON.stringify(this.ids) == "{}"){
					this.$message.error('请选择操作的数据')
					return false
				}
				if(this.action_type == 100 && this.selectTree.class_id == undefined){
					this.$message.error('请选择栏目')
					return false
				}
				confirm({content:'确定要操作吗'}).then(() => {
					setPosition({content_id:this.ids,action_type:this.action_type,class_id:this.selectTree.class_id}).then(res=>{
						this.$message({message: '操作成功', type: 'success'})
						this.index()
					})
				})
			},
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children
				}
				return {
					id: node.val,
					label: node.key,
					children: node.children
				}
			},
			changePage(){
				this.dialog.showList = true
				this.dialog.addDialogStatus = false
				this.dialog.updateDialogStatus = false
			}
		},
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>